<template>
  <div class="banner">
    <el-carousel class="bannerBox" :interval="5000" arrow="always">
      <el-carousel-item v-for="item in blogs.slice(0,4)" :key="item.uid">
        <img
          style="width:100%; height:100%; display:block;cursor:pointer;"
          :src="item.photoList[0]"
          :alt="item.title"
          @click="to(item.uid)"
        />
        <div class="carousel-title">
          <span>{{item.title}}</span>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  data() {
    return {
      blogs: []
    };
  },
  methods: {
    to(blogUid) {
      let routeData = this.$router.resolve({
        path: "/info",
        query: { blogUid }
      });
      window.open(routeData.href, "_blank");
    }
  },
  mounted() {
    let session = window.localStorage;
    let blogs = JSON.parse(session.getItem("blogs"));
    this.blogs = blogs;
  }
};
</script>

<style>
 .el-carousel__container {
    height: 450px !important;
  }
@media only screen and (max-width: 1200px) {
  .el-carousel__container {
    height: 450px !important;
  }
}
@media only screen and (max-width: 1000px) {
  .el-carousel__container {
    height: 450px !important;
  }
}

@media only screen and (max-width: 960px) {
  .el-carousel__container {
    height: 450px !important;
  }
}

@media only screen and (max-width: 500px) {
  .el-carousel__container {
    height: 200px !important;
  }
}
.carousel-title {
  cursor: pointer;
  position: absolute;
  z-index: 10;
  bottom: 40px;
  height: 40px;
  width: 100%;
  line-height: 40px;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
}
.carousel-title span {
  color: white;
  font-size: 22px;
  display: inline-block;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
